<template>
  <div style="width: 650px">
    <el-page-header @back="$router.go(-1)" />
    <br />

    <el-card header="修改个人信息">
      <el-form
        ref="dataForm"
        :model="entity"
        :rules="formRules"
        label-suffix="："
        label-width="auto"
      >
        <el-form-item label="账号" prop="userAccount">
          <div style="text-align: left">
            {{ entity.userAccount }}
          </div>
        </el-form-item>
        <el-form-item label="手机号" prop="userPhone">
          <el-input
            v-model="entity.userPhone"
            placeholder="请输入手机号"
            clearable
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="userEmail">
          <el-input
            v-model="entity.userEmail"
            placeholder="请输入邮箱"
            clearable
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="昵称" prop="userNickName">
          <el-input
            v-model="entity.userNickName"
            placeholder="请输入昵称"
            clearable
            maxlength="50"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="角色">
          <el-tag v-for="role in entity.roles" :key="role.id" effect="plain">
            {{ role.roleName }}
          </el-tag>
        </el-form-item>

        <el-form-item label="部门">
          <el-tag v-if="entity.userDeptId == 0" type="danger" effect="plain">
            根部门
          </el-tag>
          <el-tag v-else-if="entity.deptName" effect="plain">
            {{ entity.deptName }}
          </el-tag>
        </el-form-item>

        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            class="m-auto"
            @click="submitHandler"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <br />

    <el-card v-if="faceEnabled" header="登录方式">
      <el-form label-suffix="：" label-width="auto">
        <el-form-item label="人脸登录">
          <el-switch
            v-model="binded"
            :loading="changeLoading"
            :before-change="faceLoginChangeHandler"
          />

          <j-face-camera-dialog
            :dialog="faceCameraDialog"
            @success="captureHandler"
            @cancel="cancelHandler"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getInfo, putInfo } from '@/api/loginUser'
import { face } from '@/api/loginUser/face'

import { fetchList, bindDevice, unbindDevice } from '@/api/loginUser/device'
import { regular } from '@/utils/formRegular'

import JFaceCameraDialog from '@/components/JFaceCamera/Dialog'

export default {
  name: 'MyInfo',
  data() {
    return {
      loading: false,
      entity: {},
      formRules: {
        userPhone: [
          {
            pattern: regular.mobile,
            message: regular.mobileMsg,
            trigger: 'blur',
          },
        ],
        userEmail: [
          {
            type: 'email',
            message: '请输入正确的邮箱',
            trigger: 'blur',
          },
        ],
      },
      binded: false,
      faceCameraDialog: {
        visible: false,
        value: null,
      },
      changeLoading: false,
    }
  },
  computed: {
    device() {
      return this.$store.getters.device
    },
    faceEnabled() {
      return window.config.faceEnabled
    },
  },
  components: {
    JFaceCameraDialog,
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getInfo().then((res) => {
        const info = res.data.data
        if (info.userDeptId == 0) {
          info.deptName = '根部门'
        }
        this.entity = info
      })

      fetchList({
        deviceUid: this.device.deviceUid,
      }).then((res) => {
        this.binded = res.data.data.length > 0
      })
    },
    submitHandler() {
      this.loading = true
      putInfo({
        userPhone: this.entity.userPhone,
        userEmail: this.entity.userEmail,
        userNickName: this.entity.userNickName,
      })
        .then(() => {
          this.$message.success('操作成功')
          this.$store.commit('loginUser/SET_INFO', this.entity)
        })
        .finally(() => {
          this.loading = false
        })
    },

    faceLoginChangeHandler() {
      this.changeLoading = true
      if (this.binded) {
        return new Promise((resolve) => {
          unbindDevice(this.device.deviceUid)
            .then(() => {
              this.$message.success('操作成功')
              this.$store.commit('device/CLEAR_DEVICE_USER')
              resolve(true)
            })
            .catch(() => {
              resolve(false)
            })
            .finally(() => {
              this.changeLoading = false
            })
        })
      } else {
        return new Promise((resolve) => {
          this.faceCameraDialog.visible = true
          this.faceCameraDialog.resolve = resolve
        })
      }
    },
    cancelHandler() {
      this.faceCameraDialog.resolve(false)
    },
    captureHandler() {
      face(this.faceCameraDialog.value)
        .then(() => {
          bindDevice(this.device)
            .then(() => {
              this.$message.success('开启人脸登录成功')
              this.$store.commit('device/SET_DEVICE_USER', {
                userId: this.entity.id,
                username: this.entity.userAccount,
              })
              this.faceCameraDialog.resolve(true)
            })
            .catch(() => {
              this.faceCameraDialog.resolve(false)
            })
            .finally(() => {
              this.changeLoading = false
            })
        })
        .catch(() => {
          this.faceCameraDialog.resolve(false)
        })
        .finally(() => {
          this.changeLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
}

.form {
  padding: 10px;
  max-width: 900px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="scss">
.faceCameraDialog {
  width: 680px;
}
</style>
